<template>
    <div class="custom-checkbox" :class="{ 'is-checked': isChecked, 'is-indeterminate': isIndeterminate }"
        @click="toggleState">
        <div class="checkbox-container">
            <div class="checkbox-icon">
                <svg-icon v-if="isChecked" name="math-true" width="11px" height="11px" color='#fff' />
                <svg-icon v-if="isIndeterminate" name="math-reduce" width="11px" height="11px" color='#fff' />
            </div>
        </div>        
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    checked: {
        type: Boolean,
        default: false,
    },
    indeterminate: {
        type: Boolean,
        default: false,
    },
    label: {
        type: String,
        default: '',
    }
});
const emit = defineEmits(['change']);    

const isChecked = ref(props.checked);
const isIndeterminate = ref(props.indeterminate);

watch(() => props.checked, (newValue) => {
    isChecked.value = newValue;
});

watch(() => props.indeterminate, (newValue) => {
    isIndeterminate.value = newValue;
});

const toggleState = () => {
    emit('change');
};
</script>

<style scoped lang="scss">
.custom-checkbox {
    display: inline-block;
    vertical-align: middle;   
    cursor: pointer;
    user-select: none;
}

.checkbox-container {    
    width: 13px;
    height: 13px;
    border: 1.5px solid var(--el-text-color-secondary);
    background-color: var(--el-bg-color-overlay);
    border-radius: 2px;
    margin: 3px;
}
.checkbox-container:hover {    
    border-color: var(--el-color-primary);    
}

.checkbox-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.custom-checkbox.is-checked .checkbox-container {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
}

.custom-checkbox.is-indeterminate .checkbox-container {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
}

</style>